<template>
  <a-card title="网站平台访问分布统计">
    <template #extra>
      <a-button :danger="mapType=='province'" type="primary" size="small"  @click="handleLoadDataFilter('province')">省份</a-button>
      <a-button :danger="mapType=='city'" style="margin-left: 10px" type="primary" size="small"  @click="handleLoadDataFilter('city')">城市</a-button>
    </template>
    <div id="mapbox" style="width:100%;height:720px;"></div>
  </a-card>
</template>
<script setup>
import * as echarts from 'echarts';
// 请确保在引入百度地图扩展之前已经引入百度地图 JS API 脚本并成功加载
// https://api.map.baidu.com/api?v=3.0&ak=你申请的AK
import 'echarts/extension/bmap/bmap';

const mapType = ref("city")
const convertData = function (geoCoordMap,data) {
  var res = [];
  for (var i = 0; i < data.length; i++) {
    var geoCoord = geoCoordMap[data[i].name];
    if (geoCoord) {
      res.push({
        name: data[i].name,
        value: geoCoord.concat(data[i].value)
      });
    }
  }
  return res;
};
const handleLoadOrderCharts = (geoCoordMap,data) => {
  nextTick(() => {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById("mapbox"));
    var option = {
      backgroundColor: 'transparent',
      title: {
        text: '网站平台访问分布统计 - 百度地图',
        subtext: '',
        sublink: '',
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      bmap: {
        center: [104.114129, 37.550339],
        zoom: 5,
        roam: true,
        mapStyle: {
          styleJson: [
            {
              featureType: 'water',
              elementType: 'all',
              stylers: {
                color: '#d1d1d1'
              }
            },
            {
              featureType: 'land',
              elementType: 'all',
              stylers: {
                color: '#f3f3f3'
              }
            },
            {
              featureType: 'railway',
              elementType: 'all',
              stylers: {
                visibility: 'off'
              }
            },
            {
              featureType: 'highway',
              elementType: 'all',
              stylers: {
                color: '#fdfdfd'
              }
            },
            {
              featureType: 'highway',
              elementType: 'labels',
              stylers: {
                visibility: 'off'
              }
            },
            {
              featureType: 'arterial',
              elementType: 'geometry',
              stylers: {
                color: '#fefefe'
              }
            },
            {
              featureType: 'arterial',
              elementType: 'geometry.fill',
              stylers: {
                color: '#fefefe'
              }
            },
            {
              featureType: 'poi',
              elementType: 'all',
              stylers: {
                visibility: 'off'
              }
            },
            {
              featureType: 'green',
              elementType: 'all',
              stylers: {
                visibility: 'off'
              }
            },
            {
              featureType: 'subway',
              elementType: 'all',
              stylers: {
                visibility: 'off'
              }
            },
            {
              featureType: 'manmade',
              elementType: 'all',
              stylers: {
                color: '#d1d1d1'
              }
            },
            {
              featureType: 'local',
              elementType: 'all',
              stylers: {
                color: '#d1d1d1'
              }
            },
            {
              featureType: 'arterial',
              elementType: 'labels',
              stylers: {
                visibility: 'off'
              }
            },
            {
              featureType: 'boundary',
              elementType: 'all',
              stylers: {
                color: '#fefefe'
              }
            },
            {
              featureType: 'building',
              elementType: 'all',
              stylers: {
                color: '#d1d1d1'
              }
            },
            {
              featureType: 'label',
              elementType: 'labels.text.fill',
              stylers: {
                color: '#999999'
              }
            }
          ]
        }
      },
      series: [
        {
          name: 'pm2.5',
          type: 'scatter',
          coordinateSystem: 'bmap',
          data: convertData(geoCoordMap,data),
          symbolSize: function (val) {
            return val[2] / 10;
          },
          encode: {
            value: 2
          },
          label: {
            formatter: '{b}',
            position: 'right',
            show: false
          },
          emphasis: {
            label: {
              show: true
            }
          }
        },
        {
          name: 'Top 5',
          type: 'effectScatter',
          coordinateSystem: 'bmap',
          data: convertData(geoCoordMap,
              data
                  .sort(function (a, b) {
                    return b.value - a.value;
                  })
                  .slice(0, 6)
          ),
          symbolSize: function (val) {
            return val[2] / 10;
          },
          encode: {
            value: 2
          },
          showEffectOn: 'render',
          rippleEffect: {
            brushType: 'stroke'
          },
          label: {
            formatter: '{b}',
            position: 'right',
            show: true
          },
          itemStyle: {
            shadowBlur: 10,
            shadowColor: '#333'
          },
          emphasis: {
            scale: true
          },
          zlevel: 1
        }
      ]
    };
    // 绘制图表
    myChart.setOption(option);
    myChart.on('click', function(params) {
      console.log("2",params);
    });

    window.addEventListener('resize', function() {
      myChart.resize();
    });
  })
}

const handleLoadData = async ()=>{
  const resp = await useStatePCDataApi(mapType.value)
  var geoMap = {}
  resp.data.forEach(c=>{
    geoMap[c.name] = [c.longitude,c.latitude]
  })
  var data = resp.data.map(c=>{
    return {name:c.name,value:c.nums}
  })
  return Promise.resolve({geoMap,data})
}


const handleLoadDataFilter = (type)=>{
  mapType.value = type
  handleLoadData().then(({geoMap,data})=>{
    handleLoadOrderCharts(geoMap,data)
  })
}

onMounted(() => {
  loadBMap("9AoiWzlQbRK2R1nntYuqyobpWG7ZLLyY").then(()=> {
    handleLoadData().then(({geoMap,data})=>{
      handleLoadOrderCharts(geoMap,data)
    })
  })
})

</script>
